<template>
  <a-row >
    <a-col>
      <a-card :bordered="false" style="margin-bottom: 10px">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form-model layout="inline" ref="ruleForm" :model="form">
            <z-form-item :datas="fieldArr" :form="form" :gutter="24" :toggle="toggleSearchStatus">
              <a-col :span="8" slot="submit-action">
                <a-space :size="6">
                  <a-button type="primary" @click="onQuery" icon="search">查询</a-button>
                  <a-button @click="onResetForm" icon="reload">重置</a-button>
                  <a @click="toggleSearchStatus = !toggleSearchStatus">
                    {{ toggleSearchStatus ? '收起' : '展开' }}
                    <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
                  </a>
                </a-space>
              </a-col>
            </z-form-item>
          </a-form-model>
        </div>
      </a-card>
      <a-card :bordered="false">
        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <div>
            <a-button type="primary" @click="clickPush()">督办设置</a-button>
          </div>
        </div>
        <div>
<!--          <a-alert type="info" :showIcon="true">-->
<!--            <div slot="message">-->
<!--              截至目前，收到的红牌督办共<span style="color:#1890FF;"> {{ count.redCard }} </span>个，-->
<!--              黄牌督办<span style="color:#1890FF;"> {{ count.yellowCard }} </span>个，-->
<!--              普通督办<span style="color:#1890FF;"> {{ count.commonCard }} </span>个，-->
<!--              共<span style="color:#1890FF;"> {{ count.census }} </span>个督办通知-->
<!--              ，其中<span style="color:#1890FF;"> {{ count.noSupervise }} </span>个未督办，-->
<!--              <span style="color:#1890FF;"> {{ count.yesSupervise }} </span>个已督办-->
<!--              ，已督办中有<span style="color:#1890FF;"> {{ count.noFeedbook }} </span>个未反馈督办结果，-->
<!--              <span style="color:#1890FF;"> {{ count.yesFeedbook }} </span>个已反馈督办结果 ，-->
<!--              <span style="color:#1890FF;"> {{ count.yesPlaceFile }} </span>个已归档。-->
<!--            </div>-->
<!--          </a-alert>-->
        </div>
        <!-- 表格展示 -->
        <div class="table-page-content">
          <z-table
            ref="table"
            rowKey="id"
            :showAlert="false"
            :showSelection="false"
            :loading="loading"
            :columns="columns"
            :dataSource="pageData"
            @selectedRow="onSelectedRow"
            @change="onTableChange"
          >

            <template slot="stopTime" slot-scope="text, record">
              <div>
                <span style="margin-right: 20px">{{ text }}</span>
                <a-tag v-if="record.supervisType === 3" color="red">逾期 {{ record.supervisTypeLabel }} 天</a-tag>
                <a-tag v-if="record.supervisType === 2" color="pink">逾期 {{ record.supervisTypeLabel }} 天</a-tag>
                <a-tag v-if="record.supervisType === 1" color="green">逾期 {{ record.supervisTypeLabel }} 天</a-tag>
              </div>
            </template>

            <template slot="supervisType" slot-scope="text, record">
              <div v-if="record.supervisType === 0">未逾期</div>
              <div v-if="record.supervisType === 1">普通督办</div>
              <div v-if="record.supervisType === 2">黄牌督办</div>
              <div v-if="record.supervisType === 3">红牌督办</div>
            </template>

            <template slot="supervisStatus" slot-scope="text, record">
              <div v-if="record.supervisStatus === 0">未督办</div>
              <div v-if="record.supervisStatus === 1">已督办</div>
            </template>

            <template slot="supervisResult" slot-scope="text, record">
              <div v-if="record.supervisResult === 0">未反馈</div>
              <div v-if="record.supervisResult === 1">已反馈</div>
              <div v-if="record.supervisResult === 2">已归档</div>
            </template>

            <template slot="action" slot-scope="text, record">
              <a v-if="record.supervisResult === 0">督办提醒</a>
              <a v-if="record.supervisResult === 1" @click="lookResult(record)">查看结果</a>
              <a v-if="record.supervisResult === 2" @click="lookResult(record)">查看归档记录</a>
            </template>

          </z-table>
        </div>
        <!--弹窗区域-->
      </a-card>
    </a-col>
    <DetailModal ref="detailModalId" />
    <manipulate ref="manipulate" :data="manipulateLi"/>
  </a-row>
</template>

<script>
import DetailModal from './modules/DetailModal'
import manipulate from "@views/sjsk/specialist/supervise/modules/manipulate";
import { DisabledAuthFilterMixin } from '@/mixins/DisabledAuthFilterMixin'
import departTree from '../../modules/departTree'
import {listFor,listForm} from "@views/sjsk/modules/list";
import {getSetId, getSuperviseCount, SuperviseList} from "@api/sjsk/specialist";

export default {
  components: { departTree,DetailModal,manipulate },
  mixins: [DisabledAuthFilterMixin,listFor,listForm],
  data() {
    return {
      manipulateLi:undefined,
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      rangePickerTime: [],
      show: false,
      closeTip: false,
      visible: false,
      handleModalBool: false,
      isDisabled: true,
      reloading: false,
      toggle: true,
      selectKeys: [],
      form: {},
      queryParam: {},
      handleModalTitle: null,
      /* 查询折叠 */
      toggleSearchStatus:false,
      fieldArr: [
        {label: '督办对象', prop: 'personnelName', tagType: 'input', span: 5},
        {label: '手机号', prop: 'phone', tagType: 'input', span: 5},
        {label: '所属区域', prop: 'region', tagType: 'dict-select', dictCode:'sex', span: 5, toggle: true},
        {label: '督办类型', prop: 'supervisType', tagType: 'dict-select', span: 5, toggle: true,dictOptions:[{text:'普通督办',value:'0'},{text:'黄牌督办',value:'1'},{text:'红牌督办',value:'2'}]},
        {label: '督办状态', prop: 'supervisStatus', tagType: 'dict-select', span: 5, toggle: true,dictOptions:[{text:'未督办',value:'0'},{text:'已督办',value:'1'}]},
        {label: '督办结果', prop: 'supervisResult', tagType: 'dict-select', span: 5, toggle: true,dictOptions:[{text:'未反馈',value:'0'},{text:'已反馈',value:'1'},{text:'已归档',value:'2'}]},
      ],
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 40,
          align: 'center',
          customRender: (text, record, index) => {
            return `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
          }
        },
        {
          title: '督察对象',
          dataIndex: 'personnelName',
          width: 60,
          align: 'center',
          scopedSlots: { customRender: 'personnelName' },
        },
        {
          title: '手机号',
          dataIndex: 'phone',
          width: 110,
          align: 'left',
          scopedSlots: { customRender: 'phone' },
        },
        {
          title: '事项类型',
          dataIndex: 'materType',
          width: 40,
          align: 'center',
          scopedSlots: { customRender: 'materType' },
        },
        {
          title: '事项详情',
          dataIndex: 'materDatails',
          width: 80,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={10} />
          }
        },
        {
          title: '开始时间',
          dataIndex: 'createTime',
          width: 100,
          align: 'center',
          scopedSlots: { customRender: 'createTime' },
        },
        {
          title: '截至日期',
          dataIndex: 'stopTime',
          width: 160,
          align: 'center',
          scopedSlots: { customRender: 'stopTime' },
        },
        {
          title: '督办类型',
          dataIndex: 'supervisType',
          width: 60,
          align: 'center',
          scopedSlots: { customRender: 'supervisType' },
        },
        {
          title: '督办状态',
          dataIndex: 'supervisStatus',
          width: 60,
          align: 'center',
          scopedSlots: { customRender: 'supervisStatus' },
        },
        {
          title: '督办结果',
          dataIndex: 'supervisResult',
          width: 60,
          align: 'center',
          scopedSlots: { customRender: 'supervisResult' },
        },
        {
          title: '操作',
          width: 120,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        }
      ],
      title:undefined,
      count:undefined,
      setid:undefined

    }
  },
  created() {},
  async mounted() {
    this.onQuery()
  },
  methods: {
    shows() {
      this.visible = true
      getSetId().then( res => {
        if(res.success){
          this.setid = res.result
        }
      })
    },
    lookResult(val){
      this.title = ''
      this.manipulateLi = val
      this.$refs.manipulate.show()
    },
    clickPush() {
      this.$refs.detailModalId.show()
    },
    onQuery() {
      this.pageFilter.pageNo = 1
      console.log(this.form)
      this.refreshTable()
      // this.$refs.ruleForm.validate((valid) => {
      //   if (valid) {
      //     console.log(this.queryParam)
      //   } else {
      //     return false
      //   }
      // })
    },

    getSuperviseCount(){
      getSuperviseCount().then(ser => {
        this.count = ser.result
        console.log(this.count)
      }).catch(err => {
        console.log(err)
      })
    },
    refreshTable() {
      let form = Object.assign({}, this.form, this.pageFilter)
      this.loading = true
      SuperviseList(form)
        .then(res => {
          if (res.success) {
            this.pageData = res.result ? res.result : {}
            this.loading = false
            this.getSuperviseCount()
            this.shows()
            // this.$refs.table.onClearRowKeys()
          } else {
            this.loading = false
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    // 弹窗成功接收

    // 详情
    handleDetails(record) {
      this.handleModalTitle = '任务详情'
      this.$refs.intellDetailModalRef.show(record)
    },
    // 修改分组
    handleProups() {
      let selectList = this.$refs.table.getSelectedRows()
      let idList = selectList.map(v => v.id).filter(obj => obj !== null && obj !== undefined && obj !== '')
      this.$refs.groupsModalRef.edit(idList)
    },
    /** 重新加载组件 */

    getTreeData(datas, id) {
      console.log(datas, id)
      console.log(id)
    },
    toggleBool(bool) {
      console.log(bool)
      this.toggle = bool
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
</style>
